<template>
	<view class="content">
		<!-- 返回 -->
		<image src="/static/back_icon.png" :style="{top: backIconTop}" class="back" @click="back"></image>
		
		<!-- 翻牌抽奖 -->
		<view class="gridRow">
			<view class="gridRow_in">
				<view @click="lottoLuckDraw(index)" :class="index == prizeIndex ? 'yellow' : ''" class="grid" v-for="(item,index) in prizeList" :key="index">
					<view :class="index == prizeIndex ? 'active' : ''" class="fm">
						<image mode="widthFix" src="/static/prizeDraw/activity/wfm.png"></image>
						<view class="text_row">
							<view class="dnati">{{item.info}}</view>
						</view>
					</view>
					<view :class="index == prizeIndex ? 'active' : ''" class="zm">
						<image mode="widthFix" src="/static/prizeDraw/activity/wzm.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 中奖弹窗 -->
		<view @click="prizeReceive" class="maskRow" v-if="showPop">
			<view class="imgRow">
				<image mode="widthFix" style="width: 100%;" src="/static/prizeDraw/activity/popup.png"></image>
				<view class="text_row">
					<view class="tip" v-if="isPrize">恭喜你，抽中了<br />{{showText}}</view>
					<view class="tip" v-if="!isPrize">{{showText}}</view>
				</view>
			</view>
		</view>
		
		<!-- 填写中奖信息 -->
		<uv-popup ref="popup" :close-on-click-overlay="false">
			<view class="uv-popup popup">
				<view class="popup-title">填写中奖信息</view>
				<view class="popup-content">
					<form @submit="formSubmit">
						<view class="form" v-if="fillInfo.name == 'name'">
							<text>姓名</text>
							<input class="form-input" name="name" placeholder="请输入姓名" />
						</view>
						<view class="form" v-if="fillInfo.phone == 'phone'">
							<text>手机号</text>
							<input class="form-input" name="phone" placeholder="请输入手机号" type="number" maxlength="11" />
						</view>
						<view class="form" v-if="fillInfo.customer_type == 'customer_type'">
							<text>类型</text>
							<picker class="form-input" name="customer_type" :value="customerTypeIndex" :range="customerType" @change="customerTypeChange">
								<view class="picker">
									{{customerType[customerTypeIndex]}}
								</view>
							</picker>
						</view>
						<view class="submit">
							<button form-type="submit">提交信息</button>
						</view>
					</form>
				</view>
			</view>
		</uv-popup>
		
		<!-- 领取说明 -->
		<uv-popup ref="tip" :close-on-click-overlay="false">
			<view class="uv-popup popup">
				<view class="popup-title">领取说明</view>
				<view class="popup-content">{{tip_content}}</view>
				<view class="submit">
					<button @click="closeTip">立即参加活动</button>
				</view>
			</view>
		</uv-popup>
		
	</view>
</template>

<script>
	import * as api from '@/api/activity'
	export default {
		data() {
			return {
				// 返回按钮位置
				backIconTop: 0,
				// 页面数据
				pageOption: {},
				// 奖品列表
				prizeList:[
					{info: ""}, {info: ""}, {info: ""},
					{info: ""}, {info: ""}, {info: ""},
					{info: ""}, {info: ""}, {info: ""}
				],
				// 中奖弹窗
				showPop: false,
				// 中奖文本
				showText: "",
				// 当前是否为奖品
				isPrize: false,
				// 是否中过奖
				prizeSuccess: false,
				// 中奖位置
				prizeIndex: null,
				// 是否填写信息
				isWriteInfo: false,
				// 抽奖次数
				drawNum: 0,
				// 需填写的信息
				fillInfo: {},
				// 领取说明
				tip_content: '',
				// 客户类型
				customerType: ['新客', '老客'],
				customerTypeIndex: 0,
			};
		},
		onLoad(option) {
			this.pageOption = option;
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.backIconTop = menuButtonInfo.top + 'px';
			api.getInfo({
				'activityId': this.pageOption.activityId ?? ''
			}).then(res => {
				this.fillInfo = JSON.parse(res.data.draw_prize_fill_info);
				this.tip_content = res.data.draw_prize_tip
			});
		},
		methods: {
			back: function () {
				// 返回上一页
				uni.navigateBack();
			},
			// 翻牌抽奖
			lottoLuckDraw: function (count) {
				var that = this;
				api.prizeDraw({
					'activityId': that.pageOption.activityId ?? ''
				}).then(res => {
					if (res.code == 200) {
						// 写入中奖信息
						that.prizeIndex = count;
						that.prizeList[count].info = res.data.prizeName;
						that.showPop = true;
						that.showText = res.data.prizeName;
						that.isPrize = res.data.isPrize;
						if (res.data.isPrize == true) {
							that.prizeSuccess = true;
						}
						// 获取剩余中奖次数
						that.drawNum = res.data.darwNum;
						// 重置翻牌
						setTimeout(() => {
							that.prizeIndex = null;
						}, 2000)
					}
				});
			},
			// 领取奖品
			prizeReceive: function () {
				this.showPop = false;
				if (this.drawNum == 0 && this.prizeSuccess == true) {
					this.$refs.popup.open();
				}
			},
			// 提交表单
			formSubmit: function (form) {
				var that = this;
				// 修改表单数据，将客户类型索引转换为文字
				let formData = form.detail.value;
				formData.customer_type = that.customerType[that.customerTypeIndex];
				
				api.submitDrawInfo({
					'activityId': that.pageOption.activityId ?? '',
					'data': formData
				}).then(res => {
					that.$refs.popup.close();
					that.$refs.tip.open();
				})
			},
			// 关闭领取说明窗口
			closeTip: function () {
				// this.$refs.tip.close();
				uni.navigateBack();
			},
			closePopup: function () {
				this.$refs.popup.close();
			},
			customerTypeChange: function (e) {
				this.customerTypeIndex = e.detail.value;
			}
		}
	}
</script>
<style lang="scss">
	// 返回
	.back {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 3vh;
		opacity: 0.7;
	} 
	// 弹窗
	.popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 25rpx;
		width: 80%;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	.popup-title {
		font-size: 36rpx;
		padding-bottom: 20rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	.popup-title::after {
		content: '';
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background: #4B08A0;
		border-radius: 2rpx;
	}
	.popup-content {
		white-space: pre-wrap;
		line-height: 1.6;
		font-size: 1em;
		margin-bottom: 15rpx;
	}
	.popup-content .form {
		padding: 12rpx 0;
		margin-bottom: 8rpx;
		position: relative;
	}
	.popup-content .form > text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 6rpx;
		display: block;
	}
	/* 表单输入框统一样式 */
	.form-input {
		border: 2rpx solid #eee;
		padding: 0 20rpx;
		height: 80rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		background: #fff;
		width: 100%;
		box-sizing: border-box;
		color: #333;
		transition: all 0.3s ease;
	}
	.form-input:focus {
		border-color: #FB960E;
		background: #FFF9F0;
	}
	.picker {
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
	}
	.picker::after {
		content: '';
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #999;
	}
	.popup-content .submit {
		margin-top: 25rpx;
	}
	.popup-content .submit > button {
		font-size: 28rpx;
		background: linear-gradient(45deg, #4B08A0, #6B2BC7);
		color: #fff;
		border-radius: 16rpx;
		padding: 10rpx 0;
		width: 100%;
		border: none;
		box-shadow: 0 4rpx 10rpx rgba(75, 8, 160, 0.2);
	}
	.popup-content .submit > button:active {
		opacity: 0.8;
	}
	// 翻牌抽奖
	.maskRow {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.imgRow {
			width: 80%;
			height: auto;
			position: relative;
			
			.text_row {
				position: absolute;
				left: 0;
				right: 0;
				top: 60rpx;
				margin: auto;
				display: flex;
				flex-direction: column;
				align-items: center;

				.price {
					color: #F93506;
					font-weight: 550;
					font-size: 60rpx;

					span {
						font-size: 80rpx;
					}
				}

				.tip {
					text-align: center;
					margin: 0rpx 100rpx 0rpx 100rpx;
					color: #C37B50;
					font-size: 50rpx;
				}
			}

			.cancel {
				position: absolute;
				left: 0;
				right: 0;
				bottom: -100rpx;
				margin: auto;
				width: 70rpx;
				height: 70rpx;
			}
		}
	}

	.content { 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		min-height: 100vh;
		background: url("/static/prizeDraw/activity/background.png");
		background-color: #4B08A0;
		background-size: 100%;
		background-repeat: no-repeat;
		
		.gridRow {
			top: 35vh;
			width: 90%;
			padding: 46rpx 0;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			transform-origin: right top;
			background: url("/static/prizeDraw/activity/frame.png");
			background-size: 100% 100%;
			background-position: center;
			background-repeat: no-repeat;
			perspective: 600;
			position: relative;
			
			.gridRow_in{
				width: 86%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.grid {
					width: 32%;
					height: calc(100vw*0.96*0.32);
					font-size: 60rpx;
					font-weight: 600;
					border-radius: 30rpx;
					position: relative;
				
					.zm, .fm {
						position: absolute;
						transition: transform 1.5s;
						top: 0;
						bottom: 0;
						right: 0;
						left: 0;
						margin: auto;
						width: 80%;
						display: flex;
						justify-content: center;
						align-items: center;
				
					}
					.zm {
						width: 95%;
						backface-visibility: hidden;
						font-size: 24rpx;
					}
					
					.fm {
						width: 95%;
						image {
							width: 100%;
						}
				
						.text_row {
							position: absolute;
							width: 85%;
							height: 100%;
							transform: rotateY(180deg);
							text-align: center;
							display: flex;
							flex-direction: column;
				
							.price {
								
								font-weight: 550;
								color: #F93506;
								font-size: 36rpx;
				
								span {
									font-size: 28rpx;
								}
							}
				
							.dnati {
								margin-top: 40rpx;
								color: #C37B50;
								font-size: 24rpx;
							}
						}
					}
				
					.active {
						transform: rotateY(180deg);
					}
				}
			}
		}
	}
	/* 领取说明弹窗按钮样式 */
	.popup .submit {
		margin-top: 25rpx;
	}
	.popup .submit > button {
		font-size: 28rpx;
		background: linear-gradient(45deg, #4B08A0, #6B2BC7);
		color: #fff;
		border-radius: 16rpx;
		padding: 10rpx 0;
		width: 100%;
		border: none;
		box-shadow: 0 4rpx 10rpx rgba(75, 8, 160, 0.2);
	}
	.popup .submit > button:active {
		opacity: 0.8;
	}
</style>
